<template>
  <div class="container">
    <!-- 用户信息 -->
    <div class="info">
      <p class="username">用户名：{{ userName }}</p>
      <p class="petName">宠物：七号</p>
    </div>

    <!-- 羁绊值展示 -->
    <div class="bond-info">
      <p class="bond-label">羁绊值</p>
      <!-- 显示大数字 -->
      <p class="bond-value">{{ bondValue }}%</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

// 使用 ref 来创建响应式数据
const userName = ref('虚拟用户');
const bondValue = ref(50); // 初始羁绊值为50%


onMounted(() => {

});
</script>

<style scoped>
.container {
  background-color: #121212;
  height: 100vh;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.info {
  margin-bottom: 20px;
  text-align: center;
}

.username, .petName {
  font-size: 18px;
  color: aliceblue;
}

.bond-info {
  text-align: center;
}

.bond-label {
  font-size: 24px;
  color: #76C7C0;
  margin-bottom: 20px;
  font-family: 'Arial', sans-serif;
}

.bond-value {
  font-size: 120px;
  font-weight: bold;
  color: #FF5733; /* 初始艺术字体颜色 */
  font-family: 'Cursive', sans-serif; /* 使用艺术字体 */
  animation: breathe 3s ease-in-out infinite; /* 调用呼吸灯效果动画 */
}

/* 呼吸灯效果的动画 */
@keyframes breathe {
  0% {
    color: rgba(255, 87, 51, 0.7); /* 初始颜色和透明度 */
  }
  50% {
    color: rgba(255, 87, 51, 1); /* 高亮显示，透明度最大 */
  }
  100% {
    color: rgba(255, 87, 51, 0.5); /* 回到初始透明度 */
  }
}
</style>
